<template>
  <section id="orderrecord" v-loading.fullscreen.lock="showloading">
      <el-row style="background-color: white;">
        <!--  <el-col :span="8"> 
            <div class="navitem" @click="triggertab(2,$event)">待支付</div>
          </el-col> -->
         <el-col :span="12"  >
             <div class="navitem " @click="triggertab(2,$event)">待服务</div>
            </el-col>  
         <el-col :span="12"> 
             <div class="navitem navaction" @click="triggertab(0,$event)">订单记录</div>
           </el-col>
      </el-row> 
      <div class="orderlist" v-for="(item,index) in lists" :key="item.orderId" @click="eventclickdetail(item)">
          <div style="line-height:40px;position:relative">
                <span>订单编号:{{splitordernumber(item.orderNumber)}}</span>
                <i :style="{
                  'display':'inline-block',
                  'position':'absolute',
                  'right':0,
                  'color':item.orderStatus=='待服务'?'red':'green',
                  'font-style': 'normal'}"
                >
                  {{item.orderStatus}}
                </i>
          </div> 
         <hr style="margin:0px 0px 10px 0px;border-top:1px solid #eee;">
         <table  border="0" width="100%" cellspacing="0" cellpadding="0" >
              <tr>
                  <td width="90">
                    <img :src="item.merchant.files[0].filePath" width="80" height="80">
                  </td>
                  <td>
                      <div>
                          <h3 style="margin:0px 0px 10px 0px;overflow-x:hidden;">{{item.merchant.shortName}}</h3>
                          <div style="line-height:25px;">普洗服务</div>
                          <div style="color:#999;">{{item.merchant.address}}</div>
                      </div>
                  </td>
              </tr>
          </table>
            <hr style="margin:10px 0px 0px 0px;border-top:1px solid #eee;">
            <table  border="0" width="100%" cellspacing="0" cellpadding="0">
              <tr height="40">
                  <td ><strong>合计：{{item.realAmount }}</strong></td>
                  <td width="100">
                      <div style="text-align:right;width:100%;">
                          <div v-if="item.orderStatus=='待评论'" > <el-button @click.stop ="eventurl(item)"  type="danger" size="mini" plain>去评论</el-button></div>
                          <div v-else-if="item.orderStatus=='待支付'"><el-button @click.stop ="eventurl(item)" type="success" size="mini" plain>去支付</el-button></div>
                          <span v-else-if="item.orderStatus=='已完成'||item.orderStatus=='待服务'" class="el-icon-arrow-right"></span>
                     </div> 
                  </td>
              </tr>
          </table>
      </div> 
  </section>
</template>
<script>
import { comm_default } from "@/comm.js";
export default {
  data: function() {
    return ({ 
      showloading: true,
      lists: [],
      controlToggle:false,
      pageSize:10,     //分页的条数  固定
      orderType:0,     //拉取什么数据
      pageNumber:0,    //从哪条开始
      listcount:true
   });
  },
  created(){
    this.orderType = 0;     
    this.pageNumber = 0;   
    this.listcount = true;
  },
  beforeMount: function() {
    $("title").text("订单记录");
    let th = this;
    th.orderType = 0;     
    th.pageNumber = 0;   
    th.listcount = true;
    th.getorderlist();
  },
  mounted: function() {
    let th = this;
    let h = window.screen.availHeight;
    setTimeout(function() {
      let winHei = $(window).height();
      $("#orderrecord").css("min-height", h + "px");
      $(window).scroll(function() {
        var scrollTop = $(document).scrollTop();
        var divHei=$('#orderrecord').height();
        if(th.listcount&&(scrollTop+winHei+20>divHei)){
           th.pageNumber +=th.pageSize;
           th.getorderlist();
        }
      });
    }, 500);
  },
  methods: {
    //切换菜单
    triggertab: function(index, $event) {
      let th = this;
      th.pageNumber = 0;
      th.lists=[];
      th.controlToggle=true;
      $(".navitem").removeClass("navaction");
      $($event.target).addClass("navaction");
      //订单类型 0.所有 2.待服务 1.未支付 3.已完成
      switch (index) {
        case 0:
          th.orderType = 0;
          th.pageNumber=0;
          th.listcount=true;
          th.getorderlist();
          break ;
        case 2:
          th.orderType = 2;
          th.pageNumber=0;
          th.listcount=true;
          th.getorderlist();
          break;
      }
    },
    //订单类型 1.未支付 2.待服务 3.已完成  0.所有（默认）
    getorderlist: function() {
      let th = this;
      let j = {
        code: "1",
        // userId: $.cookie("userid"),
        userId:1018030520140001,
        orderType: th.orderType,   //拉数据的类型  0.所有 2.待服务 1.未支付 3.已完成
        pageSize: th.pageSize,     //分页的条数  固定
        pageNumber: th.pageNumber  //从那条开始
      };
      th.showloading = true;
      th.listcount=false;
      $.get(comm_default.requestSH + "/order/getOrderList", j, function(data) {
        console.log('订单记录')
        console.log(data)
        th.showloading = false;
        if (data.executed) {
          if(data.orderList.length>=10){
            th.listcount=true;
          }
          if(th.controlToggle){
            th.lists=[];
            th.controlToggle=false;
          }
          th.lists.push(...data.orderList);
        } else {
          th.listcount=false;
          th.pageNumber=0;
          layer.open({
            content: "没数据了",
            skin: "msg",
            time: 2
          });
        }
      });
    },
    //截取ordernumber
    splitordernumber: function(value) {
      let str = "";
      if (value.length > 15) str = value.substring(0, 15);
      else str = value;
      return str;
    },
    //点击进入详情
    eventclickdetail: function(item) {
      let th = this;
      th.$router.push({
        path: "/orderdetail",
        query: { orderId: item.orderId, orderNumber: item.orderNumber ,userId:item.userId,merchantId:item.merchant.merchantId}
      });
    },
    //点击按钮执行操作
    eventurl: function(item) {
      let th = this;
      switch (item.orderStatus) {
        case "待服务":
          break;
        case "待支付":
          $.cookie("pay_orderNumber", item.orderNumber, { path: "/" });
          $.cookie("pay_realAmount", item.realAmount, { path: "/" });
          $.cookie("pay_orderId", item.orderId, { path: "/" });
          $.cookie("pay_merchantCode", item.merchant.merchantCode, {
            path: "/"
          });
          th.$router.push({ path: "/ljjs" });
          break;
        case "待评论":
          th.$router.push({
            path: "/usercomment",
            query: {
              logo: item.merchant.files[0].filePath,
              name: item.merchant.shortName,
              typestr: item.merchantServe.standard.name,
              money: item.realAmount,
              merchantId:item.merchant.merchantCode,
              serveId:item.merchantServe.dataId,
              orderNumber:item.orderNumber
            }
          });
          break;
      }
    }
  }
};
</script>
<style>
#orderrecord .navitem {
  font-size: 14px;
  height: 45px;
  line-height: 45px;
  margin: auto;
  width: 70px;
  text-align: center;
}
#orderrecord .navaction {
  border-bottom: 2px solid #f1cf83;
  font-weight: bold;
}
#orderrecord > .orderlist {
  padding-left: 10px;
  padding-right: 10px;
  background-color: white;
  margin-top: 10px;
}
#orderrecord > .orderlist .orderstatus {
  display: inline-block;
  float: right;
}
</style>
